<template>
  <div class="flex-1">
    <div v-if="currentFolder.id" class="main flex flex-col h-100">
      <SearchVue></SearchVue>
      <DataVue></DataVue>
      <SelectionVue></SelectionVue>
    </div>
    <div v-else class="main-empty h-100 w-100 flex flex-col h-100">
      <SearchVue class="w-100"></SearchVue>
      <div class="tips flex-s flex-col h-100">
        <img :src="logo" width="48" />
        <div class="text-666 text-24 gradient-text my-12"> 网阁 </div>
        <div class="text-999"> 让资源共享更简单 </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import logo from '@/assets/images/logo.png';
  import SearchVue from './search/Search.vue';
  import DataVue from './data/Data.vue';
  import SelectionVue from './selection/Selection.vue';
  import { currentFolder } from '../bus';
</script>

<style lang="scss" scoped>
  .main {
    background-color: var(--background-color);
  }
  .main-empty {
    background-color: #f8f8f8;
    .gradient-text {
      background: linear-gradient(45deg, #f99be4, #4285f4, #b1ffda, #fbbc05);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
</style>
